<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      作用域插槽：
          概念：
            将子组件的数据用到该子组件插槽内容中

          如何做：
            1. 在 <slot /> 元素绑定需要使用的属性，比如
                <slot a="1" b="2" />

            2. 使用 <template> 元素 包裹住 插槽内容，且设置一个 v-slot 指令

                <BaseButton>
                  <template v-slot:xxx="yyy">
                    <span>Hello, {{ username }}</span>  
                  </template>
                </BaseButton>

                v-slot:xxx="yyy"

                  xxx - 插槽名字，如果没有名字的话，则默认名字为 default

                  yyy - 插槽作用域数据，是一个对象，该对象收集着 写在 对应 <slot /> 上的属性

            3. 在 这个 template 下就可以使用 yyy 去获取数据

     -->

    <div id="app"></div>

    <script src="../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        template: `
          <div>
            <h1>插槽</h1>

            <BaseButton>
              <template v-slot:default="yyy">
                <span>{{ yyy.a }}, {{ yyy.b }}, Hello, {{ username }}</span>  
              </template>
            </BaseButton>

            <hr />

            <BaseButton>
              <template v-slot:default="{ b }">
                <p>{{ b }}</p>  
              </template>
            </BaseButton>
          </div>
        `,

        data() {
          return {
            username: "张三",
          };
        },
      });

      app.component("BaseButton", {
        template: `
          <button>
            <slot a="1" :b="username">
              <h2>我是默认内容</h2>  
            </slot>  
          </button>
        `,

        data() {
          return {
            username: "里斯",
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
